<template>
    <div>
        <div class="addJobInput">
            <el-input v-model="job.name" placeholder="添加职称等级" size="small" clearable></el-input>
            <el-select v-model="job.titleLevel" placeholder="职称等级" size="small">
                <el-option v-for="item in titleLevel" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="addJob">添加</el-button>
            <el-button type="danger" size="small"
                       :disabled="this.multipleSelction.length == 0"
                       @click="deleteMany">批量删除</el-button>
        </div>
        <div class="jobManaMain">
            <el-table stripe border
                      :data="jobs"
                      @selection-change="handleSelectionChange"
                      style="width: 100%" size="small">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="编号" width="55"></el-table-column>
                <el-table-column prop="name" label="职称" width="120"></el-table-column>
                <el-table-column prop="titleLevel" label="职称等级" width="120"></el-table-column>
                <el-table-column prop="createDate" label="创建时间" width="200"></el-table-column>
                <el-table-column prop="enabled" label="是否启用" width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.enabled" type="success">启用</el-tag>
                        <el-tag v-else type="danger">未启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                   @click="showEditView(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                                   @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="编辑职称" :visible.sync="dialogVisible" width="30%">
            <table>
                <tr>
                    <td><b>职称名称：</b></td>
                    <td><el-input v-model="updateJob.name" size="small" clearable></el-input></td>
                </tr>
                <tr>
                    <td><b>职称等级：</b></td>
                    <td>
                        <el-select v-model="updateJob.titleLevel" placeholder="职称等级" size="small">
                            <el-option v-for="item in titleLevel" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td><b>是否启用：</b></td>
                    <td>
                        <el-switch v-model="updateJob.enabled"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="已启用"
                                inactive-text="未启用">
                        </el-switch>
                    </td>
                </tr>
            </table>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doUpdate">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "JobMana",
        data(){
            return{
                job:{
                    name: '',
                    titleLevel: ''
                },
                updateJob:{
                    name: '',
                    titleLevel: '',
                    enabled: false
                },
                jobs:[],
                multipleSelction: [],
                titleLevel: [
                    '正高级',
                    '副高级',
                    '高级',
                    '中级',
                    '初级'
                ],
                dialogVisible: false
            }
        },
        mounted() {
            this.initJobs();
        },
        methods:{
            //初始化
            initJobs(){
                this.getRequest('/system/basic/job/').then(resp =>{
                    if (resp){
                        this.jobs = resp;
                    }
                })
            },
            //新增
            addJob(){
                if (this.job.name && this.job.titlelevel){
                    this.postRequest('/system/basic/job/',this.job).then(resp => {
                        if (resp){
                            this.jobs = resp;
                            this.job.name = '';
                            this.job.titlelevel = '';
                            this.initJobs();
                        }
                    });
                }else{
                    this.$message.error('字段不能为空')
                }
            },
            //编辑页面显示
            showEditView(data){
                Object.assign(this.updateJob,data);
                this.updateJob.createdate = '';
                this.dialogVisible = true;
            },
            //删除
            handleDelete(data){
                this.$confirm('此操作将永久删除['+ data.name +']职称, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/system/basic/job/' + data.id).then(resp =>{
                        if (resp){
                            this.initJobs();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除
            deleteMany(){
                this.$confirm('此操作将永久删除['+ this.multipleSelction.length +']条职称, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = '?';
                    this.multipleSelction.forEach(item => {
                        ids += 'ids=' + item.id + '&';
                    });
                    this.deleteRequest('/system/basic/job/' + ids).then(resp =>{
                        if (resp){
                            this.initJobs();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //保存按钮
            doUpdate(){
                this.putRequest('/system/basic/job/',this.updateJob).then(resp => {
                    if (resp){
                        this.dialogVisible = false;
                        this.initJobs();
                    }
                });
            },
            //多选设置-批量删除开关
            handleSelectionChange(val){
                this.multipleSelction = val;
            }
        }
    }
</script>

<style>
    .addJobInput .el-input {
        width: 300px;
        margin-right: 5px;
    }
    .addJobselect .el-select{
        margin-right: 5px;
    }
    .jobManaMain{
        margin-top: 10px;
    }
</style>